<script setup lang="ts">
import { computed, ref ,onBeforeUpdate, nextTick} from "vue";
import { merge } from "lodash-es";
import { useElementSize  } from "@vueuse/core";
import type { PropType } from "vue";

const props = defineProps({
  color: {
    type: Array as unknown as PropType<[string, string]>,
    default: () => [],
  },
  backgroundColor: {
    type: String,
    default: "transparent",
  },
  isSmall: {
    type: Boolean,
    default: false,
  },
});
const defaultColor = ["#104163", "#02a7f0"];
const domRef = ref(null);
const { width, height } = useElementSize(domRef,{width:0,height:0}, { box: 'border-box' });
const mergedColor = computed<[string, string]>(() => {
  return merge(defaultColor, props.color);
});

const line = ref(18)


</script>

<template>
  <div class="dv-border-box-13 dv-border-box" ref="domRef" :style="`border: 1px solid ${mergedColor[0]};`">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polyline class="dv-bb7-line-width-5" fill="transparent" :stroke="mergedColor[1]" :points="`0, ${line} 0, 0 ${line}, 0`" />
      <polyline class="dv-bb7-line-width-5" fill="transparent" :stroke="mergedColor[1]" :points="`${width - line}, 0 ${width}, 0 ${width}, ${line}`" />
      <polyline class="dv-bb7-line-width-5" fill="transparent" :stroke="mergedColor[1]" :points="`${width - line}, ${height} ${width}, ${height} ${width}, ${height - line}`" />
      <polyline class="dv-bb7-line-width-5" fill="transparent" :stroke="mergedColor[1]" :points="`0, ${height - line} 0, ${height} ${line}, ${height}`" />
    </svg>
    <div :class="isSmall ? 'dv-border-box-content2' : 'dv-border-box-content1'">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dv-border-box {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.dv-border-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: block;
}
.dv-border-box-content1 {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 6px 16px 0px;
}
.dv-border-box-content2 {
  position: relative;
  width: 100%;
  height: 100%;
}


.dv-border-box-7 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-7 .dv-border-svg-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.dv-border-box-7 .dv-border-svg-container > polyline {
  fill: none;
  stroke-linecap: round;
}
.dv-border-box-7 .dv-bb7-line-width-2 {
  stroke-width: 2;
}
// .dv-border-box-7 .dv-bb7-line-width-5 {
//   stroke-width: 5;
// }
.dv-border-svg-container >.dv-bb7-line-width-5 {
  stroke-width: 6;
}
.dv-border-box-7 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
